<!-- 导入说明 -->
<template>
  <a-modal :open="open" :title="modelTitle" width="460px" centered @update:open="v => emits('update:open', v)">
    <!-- 文本 -->
    <div v-if="explain === '普通-Excel无标注'" class="modal-body">
      <p>
        1.
        根据用户选择是否第一行为表头，表头将被忽略，使用第一列作为待标注文本，每行是一组样本，每组数据文本内容的字符数不超过512个字符（包括中英文、数字、符号等），超出的字符将不会显示。详见
        <span> 数据样例 </span>
      </p>
      <p>2. 文件类型支持xlsx，xls格式，单次仅可导入10000条标注数据，超出部分不会导入。文件格式示意图如下：</p>
      <img src="@/assets/img/dmp/importExplain/普通-Excel无标注.png" />
    </div>

    <div v-else-if="explain === '普通-TXT无标注'" class="modal-body">
      <p>
        1.
        系统会默认将一行文本内容作为一组数据，每组数据的字符数建议不超过512个字符（包括中英文、数字、符号等），超出的字符将不会显示。详见<span>
          数据样例
        </span>
      </p>
      <p>2. 请确保您的数据格式准确，如果上传一个文本文件作为一个样本，请选择“压缩包”的方式上传数据</p>
      <p>3. 支持文本文件类型为txt，单次仅可导入10000条标注数据，超出部分不会导入</p>
      <img src="@/assets/img/dmp/importExplain/普通-TXT无标注.png" />
    </div>

    <div v-else-if="explain === '普通-压缩包无标注'" class="modal-body">
      <p>1. 压缩包内的一个文本文件将作为一个样本上传，详见 <span> 示例压缩包 </span></p>
      <p>2. 压缩包为zip格式，压缩包内文件类型支持txt，压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <img src="@/assets/img/dmp/importExplain/普通-压缩包无标注.png" />
    </div>

    <div v-else-if="explain === '分类-Excel有标注'" class="modal-body">
      <p>
        1.
        Excel文件内数据格式要求为：使用第一列作为待标注文本，第二列到第N列作为标注信息列，每行是一组样本，每组数据的字符数建议不超过512个字符（包括中英文、数字、符号等），超出的字符将不会显示。详见
        <span> 数据样例 </span>
      </p>
      <p>2. 请确保您的数据格式准确，如果上传一个文本文件作为一个样本，请返回到导入方式上选择“上传压缩包”的方式上传数据</p>
      <p>3. 文件类型支持xlsx，xls格式，单次仅可导入10000条标注数据，超出部分不会导入。文件格式示意图如下：</p>
      <img src="@/assets/img/dmp/importExplain/分类-Excel有标注.png" />
    </div>

    <div v-else-if="explain === '分类-TXT有标注'" class="modal-body">
      <p>
        1.
        标注数据格式要求为"\t标注标签\t...标注标签\t\n"（即每行一个未标注样本与多个标注标签，中间使用tab键间隔，每组数据使用回车换行），每一行表示一组数据，每组数据字符数不超过512个字符（包括中英文、数字、符号等），超出的字符将不会显示，详见
        <span> 数据样例 </span>
      </p>
      <p>2. 请确保您的数据按照要求的格式准备，如果您想使用一个文本作为一个样本，请选择“压缩包”的方式上传数据</p>
      <p>3. 支持文本文件类型为txt，单次仅可导入10000条标注数据，超出部分不会导入</p>
      <img src="@/assets/img/dmp/importExplain/分类-TXT有标注.png" />
    </div>

    <div v-else-if="explain === '分类-压缩包默认格式有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>2. 压缩包内仅支持单个文本文件（txt）及同名的json格式标注文件的上传，可传多组样本，详见 <span> 示例压缩包 </span></p>
      <img src="@/assets/img/dmp/importExplain/分类-压缩包默认格式有标注.png" />
    </div>

    <div v-else-if="explain === '分类-压缩包json有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>2. 压缩包内支持多个json格式标注文件的上传，可传多组样本，详见<span> 示例压缩包 </span></p>
      <p>3. json文件中content代表文本内容，文本内容最长不能超过512个字符；labels代表标签</p>
      <img src="@/assets/img/dmp/importExplain/分类-压缩包json有标注.png" />
    </div>

    <div v-else-if="explain === '实体-Excel有标注'" class="modal-body">
      <p>
        1.
        Excel文件格式要求：首行为表头，表头为“文本内容、实体标注1、实体标注2、..”，每个表头占一列。其中实体标注包括：“位置”、“实体类别”，两者之间以英文逗号间隔，且顺序不可变
      </p>
      <p>2. 第二行起每行为一个样本，每个样本文本内容字符数不得超过512个字符（包括中英文、数字、符号等）</p>
      <p>
        3. 文件格式支持xlsx格式，xls格式，单次仅可导入10000条标注数据；详见
        <span> 数据样例 </span>
      </p>

      <img src="@/assets/img/dmp/importExplain/实体-Excel有标注.png" />
    </div>

    <div v-else-if="explain === '实体-压缩包默认格式有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>2. 压缩包内仅支持单个文本文件（txt）及同名的json格式标注文件的上传，可传多组样本，详见<span> 示例压缩包 </span></p>
      <img src="@/assets/img/dmp/importExplain/实体-压缩包默认格式有标注.png" />
    </div>

    <div v-else-if="explain === '实体-压缩包json有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>2. 压缩包内支持多个json格式标注文件的上传，可传多组样本，详见<span> 示例压缩包 </span></p>
      <p>
        3.
        json文件中content代表文本内容，文本内容最长不能超过512个字符；type代表实体标注信息，text代表实体标签对应的文本内容，start_pos代表文本实体的开始位置下标，end_pos代表文本实体的结束位置下标，下标均从0开始。
      </p>
      <img src="@/assets/img/dmp/importExplain/实体-压缩包json有标注.png" />
    </div>

    <div v-else-if="explain === '三元组-Excel有标注'" class="modal-body">
      <p>
        1.
        Excel文件格式要求：首行为表头，表头为“文本内容、实体关系1、实体关系2、..”，每个表头占一列。其中实体关系内格式为：{实体1位置,实体1类别},{实体2位置,实体2类别},实体关系。每个标注内均以英文逗号间隔，且内容顺序不可变
      </p>
      <p>2. 第二行起每行为一个样本，每个样本文本内容字符数不得超过512个字符（包括中英文、数字、符号等）</p>
      <p>
        3. 文件格式支持xlsx格式，xls格式，单次仅可导入10000条标注数据；详见
        <span> 数据样例 </span>
      </p>
      <img src="@/assets/img/dmp/importExplain/三元组-Excel有标注.png" />
    </div>

    <div v-else-if="explain === '三元组-压缩包默认格式有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>
        2. 压缩包内仅支持单个文本文件（txt）及同名的json格式标注文件的上传，可传多组样本，详见
        <span> 示例压缩包 </span>
      </p>
      <img src="@/assets/img/dmp/importExplain/三元组-压缩包默认格式有标注.png" />
    </div>

    <div v-else-if="explain === '三元组-压缩包json有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，超出部分不会导入。</p>
      <p>
        2. 压缩包内支持多个json格式标注文件的上传，可传多组样本，详见
        <span> 示例压缩包 </span>
      </p>
      <p>
        3.
        json文件中triples代表标注信息，其中predicate代表关系，subject代表起始标签，object代表终止标签，标签和关系均由数字、中英文、中/下划线组成，start_pos代表文本实体的开始位置下标，end_pos代表文本实体的结束位置下标，下标均从0开始
      </p>
      <img src="@/assets/img/dmp/importExplain/三元组-压缩包json有标注.png" />
    </div>

    <div v-else-if="explain === '相似度-Excel无标注'" class="modal-body">
      <p>1. 根据用户选择是否第一行为表头，表头将被忽略，第一列和第二列分别作为需要计算相似度的两个文本</p>
      <p>
        2. 每行是一组样本，每个文本内容字符数不超过512个字符（包括中英文、数字、符号等），超出的字符可正常保存，但可能无法参与训练。详见
        <span> 数据样例 </span>
      </p>
      <p>3. 文件类型支持xlsx，xls格式，单次仅可导入10000条标注数据，超出部分不会导入。文件格式示意图如下：</p>
      <img src="@/assets/img/dmp/importExplain/相似度-Excel无标注.png" />
    </div>

    <div v-else-if="explain === '相似度-TXT无标注'" class="modal-body">
      <p>1. 文本文件类型支持txt，编码仅支持UTF-8，单次仅可导入10000条标注数据，超出部分不会导入</p>
      <p>
        2. 短文本相似度的数据格式要求为“文本内容1\t文本内容2”，一行表示一组数据，每个文本内容字符数不超过512个，详见
        <span> 数据样例 </span>
      </p>
      <img src="@/assets/img/dmp/importExplain/相似度-TXT无标注.png" />
    </div>

    <div v-else-if="explain === '相似度-压缩包无标注'" class="modal-body">
      <p>1. txt文件每行数据格式为“文本内容1\t文本内容2”，一行表示一组数据，每个文件可以有多行文本，每个文本内容字符数不超过512个</p>
      <p>
        2. 压缩包格式为zip格式，压缩包内文件类型支持txt，压缩前源文件单次仅可导入10000条标注数据，文件编码仅支持UTF-8，详见
        <span> 示例压缩包 </span>
      </p>
      <img src="@/assets/img/dmp/importExplain/相似度-压缩包无标注.png" />
    </div>

    <div v-else-if="explain === '相似度-Excel有标注'" class="modal-body">
      <p>
        1.
        Excel文件内数据格式要求为：首行为表头，将不录入数据集中，第一列和第二列分别作为需要计算相似度的两个文本，第三列为相似度标签（0~3分别表示不相似~完全一致）
      </p>
      <p>2. 每行是一组样本，每个文本内容字符数不超过512个，详见 <span> 数据样例 </span></p>
      <p>3. 请确保您的数据格式准确，如果上传一个文本文件作为一个样本，请返回到导入方式上选择“上传压缩包”的方式上传数据</p>
      <p>4. 文件类型支持xlsx，xls格式，单次仅可导入10000条标注数据，超出部分不会导入。文件格式示意图如下：</p>
      <img src="@/assets/img/dmp/importExplain/相似度-Excel有标注.png" />
    </div>

    <div v-else-if="explain === '相似度-TXT有标注'" class="modal-body">
      <p>
        1.
        短文本相似度的数据格式要求为“文本内容1\t文本内容2\t标注结果”，标注结果用0~3分别表示不相似~完全一致，一行表示一组数据，每个文本内容字符数不超过512个
      </p>
      <p>2. 支持文本文件类型为txt，编码仅支持UTF-8，单次仅可导入10000条标注数据，详见 <span> 数据样例 </span></p>
      <img src="@/assets/img/dmp/importExplain/相似度-TXT有标注.png" />
    </div>
    <div v-else-if="explain === '相似度-压缩包默认格式有标注'" class="modal-body">
      <p>
        1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，压缩包内文件类型为txt，文件编码仅支持UTF-8
      </p>
      <p>
        2.
        txt文件每行数据格式为“文本内容1\t文本内容2\t标注结果”，标注结果用0~3分别表示不相似~完全一致。一行表示一组数据，每个文件可以有多行文本，每个文本内容字符数不超过512个，详见
        <span> 示例压缩包 </span>
      </p>
      <img src="@/assets/img/dmp/importExplain/相似度-压缩包txt有标注.png" />
    </div>

    <div v-else-if="explain === '相似度-压缩包json有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件单次仅可导入10000条标注数据，文件编码仅支持UTF-8</p>
      <p>2. 压缩包内支持多个json格式标注文件的上传，可传多组样本，详见 <span> 示例压缩包 </span></p>
      <p>
        3.
        json文件中content1、content2代表文本内容，每个文本内容最长不能超过512个字符；labels代表标签，标注结果用0~3分别表示不相似~完全一致。
      </p>
      <img src="@/assets/img/dmp/importExplain/相似度-压缩包json有标注.png" />
    </div>

    <!-- 图片 -->
    <div v-else-if="explain === '图片-图片无标注'" class="modal-body">
      <p>1. 图片类型为jpg/png/bmp/jpeg，单次上传限制100个文件</p>
      <p>2、为保证模型训练效果，所上传的图片应与实际业务场景的图片（光线、角度、采集设备）尽可能一致</p>
      <img src="@/assets/img/dmp/importExplain/图片-图片无标注.jpg" />
    </div>
    <div v-else-if="explain === '图片-压缩包无标注'" class="modal-body">
      <p>1. 压缩包支持zip格式，压缩前源文件大小限制5G以内。下载<span>示例压缩包</span></p>
      <p>2. 压缩包内图片格式要求为：图片类型为jpg/png/bmp/jpeg。</p>
      <img src="@/assets/img/dmp/importExplain/图片-压缩包无标注.jpg" />
    </div>
    <div v-else-if="explain === '图片-平台默认格式有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件大小在5G以内，超出部分不会导入。</p>
      <p>2. 压缩包内支持多个json格式标注文件的上传，可传多组样本，详见<span>示例压缩包</span></p>
      <p>3. json文件中content代表文本内容，文本内容最长不能超过512个字符；labels代表标签，标签长度上限256字符</p>
      <img src="@/assets/img/dmp/importExplain/图片-平台默认格式有标注.jpg" />
    </div>
    <div v-else-if="explain === '图像分类-以文件夹命名分类有标注'" class="modal-body">
      <p>1. 压缩包支持zip格式，大小限制5G以内</p>
      <p>2. 压缩包内图片格式要求为：图片类型为 jpg/png/bmp/jpeg，图片大小无限制，详见<span>示例压缩包</span></p>
      <img src="@/assets/img/dmp/importExplain/图像分类-以文件夹命名分类有标注.jpg" />
    </div>
    <div v-else-if="explain === '目标检测-xml（特指voc）有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件大小在5G以内</p>
      <p>
        2.
        压缩包内需要包括Images、Annotations两个文件夹，分别包括不重名图片源文件（jpg/png/bmp/jpeg）及与图片具有相同名称的对应标注文件（xml后缀），详见
        <span>示例压缩包</span>
      </p>
      <p>3. 标注文件中标签由数字、中英文、中/下划线组成，长度上限256字符</p>
      <img src="@/assets/img/dmp/importExplain/目标检测-xml（特指voc）有标注.jpg" />
    </div>
    <div v-else-if="explain === '目标检测-json（特指coco）有标注'" class="modal-body">
      <p>1. 上传已标注文件要求格式为zip格式压缩包，同时压缩前源文件大小在5G以内</p>
      <p>
        2.
        压缩包内需要包括Images、Annotations两个文件夹，分别包括图片源文件（jpg/png/bmp/jpeg）及唯一一个命名为coco_info.json的标注文件，详见
        <span>示例压缩包</span>
      </p>
      <img src="@/assets/img/dmp/importExplain/目标检测-json（特指coco）有标注.jpg" />
    </div>
    <template #footer>
      <a-button type="primary" @click="emits('update:open', false)">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'

  import { DmpSubTaskType, ImportExplainFileType } from '../../types'
  import { getImportExplain } from '../../utils'

  export interface Props {
    open: boolean
    // 子类型字段
    subTaskType: DmpSubTaskType
    // 文件类型
    fileType: ImportExplainFileType
    // 有无标注信息
    hasMarkInfo: boolean
  }

  const props = withDefaults(defineProps<Props>(), {})
  const emits = defineEmits<{
    (e: 'update:open', value: boolean): void
  }>()

  const modelTitle = computed(() => {
    switch (props.fileType) {
      case 'txt':
        return 'TXT文件导入说明'
      case 'excel':
        return 'Excel文件导入说明'
      case 'zip':
      case 'imgZip':
        return '压缩包导入说明'
      case 'format':
      case 'imgZipFormat':
        return '平台默认格式导入说明'
      case 'text-zip-txt':
        return '.txt导入说明'
      case 'json':
        return '.json导入说明'
      case 'imgImg':
        return '图片导入说明'
      case 'imgZipXml':
        return 'XML格式导入说明'
      case 'imgZipJson':
        return 'coco格式导入说明'
      default:
        return '标题'
    }
  })
  /* 动态计算导入说明内容 */
  const explain = computed(() => {
    console.log(getImportExplain(props.subTaskType, props.fileType, props.hasMarkInfo))

    return getImportExplain(props.subTaskType, props.fileType, props.hasMarkInfo)
  })
</script>

<style lang="less" scoped>
  .modal-body {
    display: flex;
    width: 396px;
    flex-direction: column;
    gap: 12px;

    p {
      color: @text02;
      .font14();

      span {
        color: #009cf8;
        cursor: pointer;
      }
    }

    img {
      width: 100%;
    }
  }
</style>
